<template>
	<view class="add-rider">
		<NavBar title="合作骑手" right="search" @rightTap="search" />
		<view class="tips" :style="{top:top}">只能选择当前地区申请入驻的骑手，其他城市或地区的骑手不显示</view>
		<view class="content">
			<view class="rider-list" v-if="riderList.length">
				<view class="rider-item" v-for="(item, index) in riderList" :key="item">
					<image :src="item.avatar" class="rider-avatar" />
					<view class="rider-details">
						<view class="rider-name"> {{item.name}} </view>
						<view class="rider-percent">
							<view class="per-num"> 好评率：{{item.score}} </view>
							<BFB :bfb="item.good_comment+'%'" />
						</view>
						<view class="rider-address"> {{item.region_info}} </view>
					</view>
					<view class="btn" @tap="inviteRider(item.member_id, index)"> 选择合作 </view>
				</view>
			</view>
			<Empty txt="当前地区暂无可以合作的骑手~" v-else/>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import BFB from '@/components/BFB.vue';
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import { GetRegionRiderApi, InviteRiderApi } from '@/service/shop.js'
	const { safeArea } = uni.getSystemInfoSync()
	const top = computed(() => safeArea.top + 44 + 'px')
	const total = ref(0)
	const page = ref(1)
	const pageSize = ref(15)
	const searchVal = ref('')
	const riderList = ref([])
	const search =  (val) => {
		searchVal.value = val
		page.value = 1
		riderList.value = []
		getRiderList()
	}
	const getRiderList = () => {
		let params = {
			page: page.value,
			page_size: pageSize.value,
			filters: {
				search: searchVal.value
			}
		}
		GetRegionRiderApi(params).then(res => {
			riderList.value.push(...res.data)
			total.value = res.total
		})
	}
	const inviteRider = (member_id, i) => {
		InviteRiderApi({member_id}).then(res => {
			riderList.value.splice(i, 1)
			getApp().globalData.toast('邀请成功')
		})
	}
	onLoad(() => {
		getRiderList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getRiderList()
	})
</script>

<style scoped lang="scss">
	.add-rider {
		.tips {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 28px;
			color: #FF7D00;
			font-size: 12px;
			font-weight: 400;
			background: #FFF7E8;
			border: 0px solid #FFF7E8;
			position: sticky;
			left: 0;
			right: 0;
			z-index: 999;
		}
		.content {
			position: relative;
			padding: 0 12px 10px;
			.rider-list {
				padding-top: 10px;
				.rider-item {
					padding: 10px;
					border-radius: 10px;
					background-color: #fff;
					display: flex;
					align-items: center;
					padding-top: 10px;
					position: relative;
					.rider-avatar {
						width: 54px;
						height: 54px;
						border-radius: 50%;
						margin-right: 10px;
					}
					.rider-details {
						flex: 1;
						.rider-name {
							color: #333333;
							font-size: 16px;
							font-weight: 400;
							line-height: 17px;
							margin-bottom: 10px;
						}
						.rider-percent {
							display: flex;
							align-items: center;
							margin-bottom: 10px;
							.per-num {
								color: #666666;
								font-size: 14px;
								font-weight: 400;
								line-height: 17px;
								margin-right: 4px;
							}
						}
						.rider-address {
							color: #666666;
							font-size: 14px;
							font-weight: 400;
							line-height: 17px;
						}
					}
					.btn {
						position: absolute;
						top: 9px;
						right: 10px;
						width: 68px;
						height: 22px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						font-size: 12px;
						font-weight: 400;
						background: #FF3B1E;
						border-radius: 151px;
					}
				}
			}
		}
	}
</style>
